<template>
  <van-row class="home-page">
    <van-nav-bar title="用户反馈" left-arrow fixed placeholder />
    <van-row v-for="category in problem[0]" :key="category.QuestionCategoryId">
      <van-cell
        class="first-cell first-cell-top"
        center
        :title="category.CategroyName"
      />
      <van-row
        :key="indexDescription"
        v-for="(childrenItem, indexDescription) in QuestionMap[
          category.QuestionCategoryId
        ]"
      >
        <van-cell
          center
          is-link
          :title="childrenItem.QuestionTitle"
          @click="myClick(category.QuestionCategoryId, indexDescription)"
        />
      </van-row>
    </van-row>
    <van-cell class="first-cell first-cell-top" center title="问题分类" />
    <van-row>
      <van-col
        :span="12"
        :key="category.QuestionCategoryId"
        v-for="category in problem[1]"
      >
        <van-cell
          center
          is-link
          :title="category.CategroyName"
          @click="mycategory(category)"
        />
      </van-col>
    </van-row>
    <van-row>
      <van-col span="12">
        <van-cell
          class="bottom-bar-one"
          @click="show = true"
          center
          title="联系客服"
        />
      </van-col>
      <van-col span="12">
        <van-cell
          center
          class="bottom-bar-two"
          title="用户反馈"
          :to="{ path: '/feedbackcustomerfeedback' }"
        />
      </van-col>
    </van-row>
    <van-dialog v-model="show" :show-confirm-button="false" ref="dialogRef">
      <van-row class="outer-dialog">
        <van-row class="block">
          <em>你可以通过以下任意方式联系到我们</em>
          <van-row type="flex" justify="space-between" class="contact">
            <van-col span="6">
              <p id="cope1">QQ:3475694248</p>
            </van-col>
            <van-col span="6">
              <van-button
                round
                class="copy"
                color="#D8DFEB"
                @click="copy"
                data-clipboard-target="#cope1"
                >复制</van-button
              >
            </van-col>
          </van-row>
          <van-row type="flex" justify="space-between" class="contact">
            <van-col span="6">
              <p id="cope2">QQ:3475694228</p>
            </van-col>
            <van-col span="6">
              <van-button
                round
                class="copy"
                color=" #D8DFEB"
                @click="copy"
                data-clipboard-target="#cope2"
                >复制</van-button
              >
            </van-col>
          </van-row>
          <van-row type="flex" justify="space-between" class="contact">
            <van-col span="6">
              <p id="cope3">QQ:3475694238</p>
            </van-col>
            <van-col span="6">
              <van-button
                round
                class="copy"
                color="#D8DFEB"
                @click="copy"
                data-clipboard-target="#cope3"
                >复制</van-button
              >
            </van-col>
          </van-row>
        </van-row>
        <!-- 关闭按钮 -->
        <van-icon
          class="close-block"
          name="close"
          color="#FDFDFD"
          size="45"
          @click="closeBlock"
        />
      </van-row>
    </van-dialog>
  </van-row>
</template>

<script>
import Clipboard from 'clipboard';
import { mapActions, mapState } from 'vuex';
import {
  NavBar,
  Cell,
  CellGroup,
  Form,
  Overlay,
  Button,
  Col,
  Row,
  Dialog,
  Icon,
  Loading,
  Toast,
} from 'vant';
import request from '@/utils/request';

export default {
  name: 'home',
  components: {
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Overlay.name]: Overlay,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    [Icon.name]: Icon,
    [Dialog.Component.name]: Dialog.Component,
    [Toast.name]: Toast,
  },
  data() {
    return {
      show: false,
      question: [],
      problem: [],
    };
  },
  computed: {
    ...mapState(['QuestionMap']),
  },
  methods: {
    mycategory(myCategoryName) {
      this.$router.push({
        path: 'listcustomerfeedback',
        query: {
          cid: myCategoryName.QuestionCategoryId,
          title: myCategoryName.CategroyName,
        },
      });
    },
    myClick(cid, index) {
      this.$router.push({
        path: 'detailcustomerfeedback',
        query: {
          cid,
          index,
        },
      });
    },
    async getProblem() {
      const getProblem = {
        header: {
          invoker: 'C0644172-3875-4941-B6D8-AAB26581083B',
          apiTag: 'cateversion',
          appId: 'E4C10B56-B15A-4C8C-B378-11FFDAE4FD6D',
          pkgName: 'com.sfsm.quickstartapp',
          ua: '',
          model: 'model',
          versionCode: 1,
          versionName: '5.5.5',
        },
        body: {},
      };
      const { data } = await request({
        url: '/api/CSAPI',
        method: 'POST',
        data: {
          ...getProblem,
        },
      });
      if (data.Code !== 200) return;
      this.problem.splice(
        0,
        1,
        data.Detail.filter((category) => !category.OrderField),
      );
      this.problem.splice(
        1,
        1,
        data.Detail.filter((category) => category.OrderField),
      );
      const { commit } = this.$store;
      data.Detail.forEach(async (category) => {
        const data = await this.getQuestion(category.QuestionCategoryId);
        commit('updateQuestionMap', {
          key: category.QuestionCategoryId,
          val: data,
        });
      });
      return data.Detail;
    },

    // 分类下的问题
    async getQuestion(categroyId) {
      const getQuestion = {
        header: {
          invoker: 'C0644172-3875-4941-B6D8-AAB26581083B',
          apiTag: 'helpcate',
          appId: 'E4C10B56-B15A-4C8C-B378-11FFDAE4FD6D',
          pkgName: 'com.sfsm.quickstartapp',
          ua: '',
          model: 'model',
          versionCode: 1,
          versionName: '5.5.5',
        },
        body: {
          categroyId,
        },
      };
      const { data } = await request({
        url: '/api/CSAPI',
        method: 'POST',
        data: {
          ...getQuestion,
        },
      });
      if (data.Code !== 200) return;
      this.question = data.Detail;

      return data.Detail;
    },
    // --------图片,一会改到feedback
    async getPicture(formdata) {
      const { data } = await request({
        url: '/api/oss/UploadTempFiles',
        method: 'POST',
        data: formdata,
      });
      if (data.Code !== 200) return;
      return data;
    },
    closeBlock() {
      const dialog = this.$refs.dialogRef;
      dialog.close();
    },
    copy() {
      Toast('已复制');
      const clipboard = new Clipboard('.copy');
      clipboard.on('success', (e) => {
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', (e) => {
        // 不支持复制
        console.log('该浏览器不支持自动复制');
        // 释放内存
        clipboard.destroy();
      });
    },
  },
  async created() {
    const {
      commit,
      state: { CategoryList },
    } = this.$store;
    if (CategoryList.length) {
      this.problem.splice(
        0,
        1,
        CategoryList.filter((category) => !category.OrderField),
      );
      this.problem.splice(
        1,
        1,
        CategoryList.filter((category) => category.OrderField),
      );
    } else {
      const data = await this.getProblem();
      commit('updateCategoryList', data);
    }
    this.getPicture();
  },
};
</script>

<style lang="less" scoped>
.home-page {
  margin-bottom: 7%;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
}
//头部导航栏样式
//修改van-nav-bar头部
/deep/ .van-ellipsis {
  color: #3b3b3b;
  font-size: 19px;
}
/deep/ .van-nav-bar .van-icon {
  color: #3b3b3b;
}
.van-cell {
  line-height: 22px;
}
.first-cell {
  background-color: #e8e8e8;
  font-size: 13px;
}
.my-cell {
  > * {
    line-height: 21px;
    font-size: 15px;
    color: #3b3b3b;
  }
}
.bottom-bar-one {
  text-align: center;
  position: fixed;
  bottom: 0px;
  width: 50%;
  height: 7%;
  color: #3b3b3b;
  background-color: #e8e8e8;
  line-height: 24px;
  font-size: 14px;
}
.bottom-bar-two {
  text-align: center;
  position: fixed;
  bottom: 0px;
  width: 50%;
  height: 7%;
  color: #ffffff;
  background-color: #2a3036;
  line-height: 24px;
  font-size: 14px;
}
/*遮罩层vant样式*/
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-dialog {
  background-color: transparent;
}
.outer-dialog {
  position: relative;
  width: 100%;
  height: 350px;
}
.close-block {
  position: absolute;
  top: 300px;
  left: 135px;
  z-index: 9999;
}
.block {
  width: 288px;
  height: 80%;
  background-color: #fff;
  margin-left: 12px;
  border-radius: 10px;
  em {
    display: block;
    font-size: 19px;
    text-align: center;
    margin: 33px 33px 20px 33px;
    color: #3c3e41;
    font-weight: 500;
    padding-top: 33px;
  }
}
.contact {
  height: 33px;
  margin: 10px 0px;
  padding: 10px 17px 0px 17px;
  p {
    height: 23px;
    font-size: 17px;
    color: #3c3e41;
    line-height: 23px;
  }
  .copy {
    height: 33px;
    color: #ccc;
  }
}
</style>
